<script setup name="subabsent">
import {onMounted, reactive, ref} from "vue";
import datetimeFormat from "@/utils/datetimeFormat.js";
import {ElMessage} from "element-plus";
import absentHttp from "@/api/absentHttp.js";
import OAMain from "@/components/OAMain.vue";
import OAPagination from "@/components/OAPagination.vue";
import OADialog from "@/components/OADialog.vue";

let absents = ref([])
let dialogVisible = ref(false);
let pageSize = ref(10);
let handleIndex = null
let pagination = reactive({
  page: 1,
  total: 5,
})
let absentForm = reactive({
  status: 2,
  response_content: ''
})
let rules = reactive({
  status: [{
    required: true,
    message: "请选择处理结果！",
    trigger: "trigger",
  }],
  response_content: [{
    required: true,
    message: "请给出理由！",
    trigger: "blur",
  }]
})
let absentFormRef = ref({})
onMounted(async () => {
  try {
    let data = await absentHttp.getSubAbsent()
    data = data.data
    pagination.total = data.total
    absents = data.results
  } catch (error) {
    ElMessage.error(error.message)
  }
})
const onShowDialog = (index) => {
  absentForm.status = 2;
  absentForm.response_content = ''
  dialogVisible.value = true;
  handleIndex = index;
}
const onSubmitAbsent = () => {
  try {
    absentFormRef.value.validate(async (valid, fields) => {
      if (valid) {
        try {
          dialogVisible.value = false;
          const absent = absents[handleIndex]
          const data = await absentHttp.handleSubAbsent(absent.id, absentForm.status, absentForm.response_content)
          absents.value.splice(handleIndex, 1, data)
          ElMessage.success('下属考勤处理成功！');
        } catch (error) {
          ElMessage.error(error)
        }
      } else {
        ElMessage.error(fields)
      }
    })
  } catch (err) {
    ElMessage.error(err)
  }

}
</script>

<template>
  <OAMain title="下属考勤">
    <el-card style="text-align: right;">
      <el-table :data="absents" style="width: 100%">
        <el-table-column prop="title" label="标题"/>
        <el-table-column prop="absent_type.name" label="类型"/>
        <el-table-column label="发起人">
          <template #default="scope">
            {{ "[" + scope.row.requester.department.name + "]" + scope.row.requester.realname }}
          </template>
        </el-table-column>
        <el-table-column prop="request_content" label="原因"/>
        <el-table-column label="发起时间">
          <template #default="scope">
            {{ datetimeFormat.stringFromDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="开始日期">
          <template #default="scope">
            {{ datetimeFormat.stringFromDate(scope.row.start_date) }}
          </template>
        </el-table-column>
        <el-table-column label="结束日期">
          <template #default="scope">
            {{ datetimeFormat.stringFromDate(scope.row.end_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="responder.realname" label="审核领导">

        </el-table-column>
        <el-table-column prop="response_content" label="反馈意见"/>
        <el-table-column label="审核状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.status===1">审核中</el-tag>
            <el-tag type="success" v-else-if="scope.row.status===2">已通过</el-tag>
            <el-tag type="danger" v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理">
          <template #default="scope">
            <el-button v-if="scope.row.status===1" type="primary" icon="EditPen" @click="onShowDialog(scope.$index)">
              处理
            </el-button>
            <el-button v-else disabled>已处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <OAPagination v-model="pagination.page" :total="pagination.total" :page-size="pageSize">

        </OAPagination>
      </template>
    </el-card>
  </OAMain>
  <OADialog title="处理考勤" v-model="dialogVisible" @submit="onSubmitAbsent">
    <el-divider content-position="center">
      <span style=
                "font-family: 'Pacifico',cursive;
                color: #69adff;
                font-size: 25px">
        {{ absents[handleIndex].requester.realname }}的请假申请
    </span>

    </el-divider>
    <el-form :model="absentForm" :rules="rules" ref="absentFormRef" label-width="100px">
      <el-form-item label="结果" prop="status">
        <el-radio-group v-model="absentForm.status">
          <el-radio :value="2" size="small">同意</el-radio>
          <el-radio :value="3" size="small">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="理由" prop="response_content">
        <el-input type="textarea" v-model="absentForm.response_content"></el-input>
      </el-form-item>
    </el-form>
  </OADialog>
</template>
<style scoped>

</style>